<template>
  <div style="display: inline-block">
    <div class="numBox">
      <div
        class="countToBox"
        @mouseenter="isShow = true"
        @mouseleave="isShow = false"
      >
      <!--     :style="popData[0]?.value==='-'?'color:#42c7de':''" -->
      <!-- :class="showArrow?popData[0]?.color:'main-color'" -->
        <CountTo
          v-if="numData.num&& numData.num.length!=0  && numData.num!=='-'"
         
          :class="numData?.color?numData?.color:popData[0]?.color?popData[0]?.color:'main-color'"
          :startVal="0"
          :endVal="Number(numData.num)"
          :duration="3000"
          :decimals="numData.decimals"
          :suffix="numData.suffix"
        />
        <span v-else-if="Number.isInteger(numData.num)" class="main-color">{{numData.num}}</span>
        <span v-else class="main-color">-</span>
        <img
          v-if="showArrow"
          :src="popData[0]?.imgSrc"
          alt=""
        />
      </div>

      <div v-show="numData.num&&numData.num!=='-'&&isShow" class="tooltipBox" :style="tooltipBoxStyle">
        
        <div class="item" v-for="(item, index) in popData" :key="index"  >
          <span>{{ item.label }}</span
          >&nbsp;
          <span :style="item.value==='-'||item.value==0?'color:#42c7de':''" :class="item.color" v-if="item.value && item.value !== '-' && item.value != 0">
            <span>{{ item.value }}</span>
            <span>{{ item.unit }}</span>
          </span>
          <span v-else class="main-color">-</span>
          <img
            v-if="item.imgSrc && item.value && item.value !== '-' && item.value != 0"
            :src="item.imgSrc"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "mytooltop",
  props: {
    
    tooltipBoxStyle: {
      type: String,
      default: "left: -86px;width: 300px",
    },
    numData: {
      type: Object,
      default: () => {
        return {
          // num: 1,
          // decimals: 2,
          // suffix: "%",
        };
      },
    },
    popData: {
      type: Array,
      default: () => [
        // {
        //   label: "同比",
        //   value: "5",
        //   imgSrc: require("../assets/common-new/green-top.png"),
        //   unit: "%",
        //   color: "safe-color",
        // },
        // {
        //   label: "占比",
        //   value: "42",
        //   imgSrc: require("../assets/common-new/green-down.png"),
        //   unit: "%",
        //   color: "safe-color",
        // },
      ],
    },
  },

  data() {
    return {
      isShow: false,
      // popData: [
      //   {
      //     label: "同比",
      //     value: "5",
      //     imgSrc: require("../../assets/common-new/green-top.png"),
      //     unit: "%",
      //     color: "safe-color",
      //   },
      //   {
      //     label: "占比",
      //     value: "42",
      //     imgSrc: require("../../assets/common-new/green-down.png"),
      //     unit: "%",
      //     color: "safe-color",
      //   },
      // ],
      // greenTop: "../../assets/common-new/green-top.png",
      // redTop: "../../assets/common-new/red-top.png",
      // greenDown: "../../assets/common-new/green-down.png",
      // redDown: "../../assets/common-new/red-down.png",
    };
  },
  created() {
   
  },
  computed:{
    // showPopArrow(){
    //   return item.imgSrc && item.value !== '-' && item.value != 0
    // },
    showArrow(){
      return (this.popData[0]?.value!=='-'&&this.popData[0]?.imgSrc&&this.popData[0].value!=0) && (this.numData.num&&this.numData.num!=='-') && ('main-color'!==this.numData.color)
    },

  },
  // watch:{
  //   popData:{
  //     hadler(newVal,oldVal){
  //     newVal.forEach((k) => {
  //     if (k.value === 0 || k.value === "-") {
  //       k.color = "main-color";
  //     }
  //   });
  //   },
  //   deep:true
  //   }

  // },
  mounted() {
   
  },

  methods: {
  
  },
};
</script>
  
  <style lang="scss" scoped>
.numBox {
  position: relative;
}
.countToBox {
  //width: 110px;
  cursor: pointer;

  text-align: center;
}
.safe-color {
  // color: #01fe01;
  color: #04C375;
}
.danger-color {
  // color: #df0213;
  color: #CB455E;
}
.main-color {
  color: #42c7de;
}
.tooltipBox {
  z-index: 1000;
  position: absolute;
  top: 24px;
  left: -60px;
  width: 200px;
  height: 40px;
  line-height: 40px;
  background: url(../assets/tooltip-bg.png);
  background-size: 100% 100%;
  font-size: 14px;
  color: white;
  // padding: 0 10px;
  display: flex;
  justify-content: center;
  img {
    width: 14px;
    height: 14px;
  }
  .item {
    margin-right: 10px;
  }
  .item:last-child {
    margin-right: 0;
  }
}
</style>
  